<!-- 申报进度 -->
<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';

const router = useRouter();
const reportDetails = ref(null);
const isLoading = ref(true);

// 获取申报详情
const fetchReport = async () => {
  try {
    const response = await fetch('http://localhost:8080/api/reports');
    if (!response.ok) throw new Error('数据获取失败');
    const data = await response.json();
    
    // 找到ID最大的记录
    if(data.length > 0) {
      const latestReport = data.reduce((max, current) => 
        current.id > max.id ? current : max
      , data[0]);
      
      reportDetails.value = latestReport;
    } else {
      throw new Error('暂无申报记录');
    }
  } catch (error) {
    console.error('请求错误:', error);
    alert(error.message);
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  fetchReport();
});

const onClickLeft = () => {
  router.push('/declare');
};
</script>

<template>
  <div class=''>
    <van-nav-bar title="申报进度" left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    
    <van-loading v-if="isLoading" vertical>加载中...</van-loading>

    <van-steps v-else direction="vertical" :active="0">
      <van-step>
        <h3>{{ new Date(reportDetails.select_time).toLocaleString() }}</h3>
        <p>您的申报平台正在审核</p>
      </van-step>
      <van-step>
        <h3>{{ new Date(reportDetails.publish_time).toLocaleString() }}</h3>
        <p>正在调查</p>
      </van-step>
      <van-step>
        <h3>{{ new Date(reportDetails.publish_time).toLocaleString() }}</h3>
        <p>平台已接收</p>
      </van-step>
      <van-step>
        <h3>{{ new Date(reportDetails.publish_time).toLocaleString() }}</h3>
        <p>成功提交申请</p>
      </van-step>
    </van-steps>
  </div>
</template>

<style scoped>
/* 可添加时间样式 */
h3 {
  color: #666;
  font-size: 14px;
  margin: 8px 0;
}
</style>